<script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { queryAoByConsole } from '@/api/sorting-matching';
  // const props = defineProps<{
  //   tableData: any;
  // }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      align: 'center',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '主键',
      dataIndex: 'msTaskAoId',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: '机型',
      dataIndex: 'productName',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '架次',
      dataIndex: 'startPlaneNo',
      ellipsis: true,
      tooltip: true,
      width: 80,
    },
    {
      title: '工作包编号',
      dataIndex: 'packageCode',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },

    {
      title: '配套状态',
      dataIndex: 'state',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: '缺件类型',
      dataIndex: 'aState',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 180,
    },

    {
      title: '分拣状态',
      dataIndex: 'sortingStatus',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
  ];
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(30);
  const msTaskPackageId = ref<string>('');

  async function getAoList() {
    const flowQueryData = ref({
      searchParams: computed(() => ({
        msTaskPackageId: msTaskPackageId.value,
      })),
      pageParameter: computed(() => ({
        pageSize: pageSize.value,
        currentPage: pageNum.value,
      })),
    });
    const data: any = await queryAoByConsole(flowQueryData.value);
    localTableData.value = data?.retData || [];
    total.value = data?.totalCount || 0;
  }

  watch(
    () => booleanStore.row,
    () => {
      if (booleanStore.num7 === 2) {
        msTaskPackageId.value = booleanStore.row;
        getAoList();
      }
    }
  );

  async function showBottomData(record: any) {
    booleanStore.setList(record, 9);
  }

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">AO表</div>
    </template>

    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      :scroll="{ y: 400 }"
      style="height: 250px"
      @row-click="showBottomData"
    >
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </a-card>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }

  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
</style>
